import React, { useEffect, useState } from 'react';
import { Card, Row, Col, Statistic, Table, Button, Space, Typography } from 'antd';
import {
    DashboardOutlined,
    DesktopOutlined,
    AlertOutlined,
    CheckCircleOutlined
} from '@ant-design/icons';
import './Home.less';

const { Title } = Typography;

interface DeviceStatus {
    key: string;
    name: string;
    status: string;
    location: string;
    lastUpdate: string;
}

const Home: React.FC = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [deviceData, setDeviceData] = useState<DeviceStatus[]>([]);

    // 模拟获取设备数据
    useEffect(() => {
        setLoading(true);
        // 模拟API请求延迟
        const timer = setTimeout(() => {
            const mockData: DeviceStatus[] = [
                {
                    key: '1',
                    name: '监控设备A',
                    status: '正常',
                    location: '一号楼',
                    lastUpdate: '2023-08-15 12:30:45',
                },
                {
                    key: '2',
                    name: '监控设备B',
                    status: '告警',
                    location: '二号楼',
                    lastUpdate: '2023-08-15 11:20:30',
                },
                {
                    key: '3',
                    name: '监控设备C',
                    status: '正常',
                    location: '三号楼',
                    lastUpdate: '2023-08-15 10:15:22',
                },
                {
                    key: '4',
                    name: '监控设备D',
                    status: '离线',
                    location: '四号楼',
                    lastUpdate: '2023-08-14 23:45:10',
                },
                {
                    key: '5',
                    name: '监控设备E',
                    status: '正常',
                    location: '五号楼',
                    lastUpdate: '2023-08-15 09:30:00',
                },
            ];

            setDeviceData(mockData);
            setLoading(false);
        }, 1000);

        return () => clearTimeout(timer);
    }, []);

    // 表格列定义
    const columns = [
        {
            title: '设备名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status: string) => {
                let color = '';
                let icon = null;

                switch (status) {
                    case '正常':
                        color = 'green';
                        icon = <CheckCircleOutlined />;
                        break;
                    case '告警':
                        color = 'orange';
                        icon = <AlertOutlined />;
                        break;
                    case '离线':
                        color = 'red';
                        icon = <DesktopOutlined />;
                        break;
                    default:
                        color = 'blue';
                        break;
                }

                return (
                    <span style={{ color }}>
                        {icon} {status}
                    </span>
                );
            },
        },
        {
            title: '位置',
            dataIndex: 'location',
            key: 'location',
        },
        {
            title: '最后更新时间',
            dataIndex: 'lastUpdate',
            key: 'lastUpdate',
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: DeviceStatus) => (
                <Space size="middle">
                    <Button type="link" size="small">查看</Button>
                    <Button type="link" size="small">监控</Button>
                </Space>
            ),
        },
    ];

    // 获取设备状态统计
    const getDeviceStats = () => {
        const total = deviceData.length;
        const normal = deviceData.filter(d => d.status === '正常').length;
        const alert = deviceData.filter(d => d.status === '告警').length;
        const offline = deviceData.filter(d => d.status === '离线').length;

        return { total, normal, alert, offline };
    };

    const stats = getDeviceStats();

    return (
        <div className="home-container">
            <Title level={4}>系统概览</Title>

            <Row gutter={[16, 16]} className="stat-cards">
                <Col xs={24} sm={12} md={6}>
                    <Card variant="borderless">
                        <Statistic
                            title="设备总数"
                            value={stats.total}
                            valueStyle={{ color: '#3f8600' }}
                            prefix={<DashboardOutlined />}
                        />
                    </Card>
                </Col>
                <Col xs={24} sm={12} md={6}>
                    <Card variant="borderless">
                        <Statistic
                            title="正常设备"
                            value={stats.normal}
                            valueStyle={{ color: '#3f8600' }}
                            prefix={<CheckCircleOutlined />}
                        />
                    </Card>
                </Col>
                <Col xs={24} sm={12} md={6}>
                    <Card variant="borderless">
                        <Statistic
                            title="告警设备"
                            value={stats.alert}
                            valueStyle={{ color: '#faad14' }}
                            prefix={<AlertOutlined />}
                        />
                    </Card>
                </Col>
                <Col xs={24} sm={12} md={6}>
                    <Card variant="borderless">
                        <Statistic
                            title="离线设备"
                            value={stats.offline}
                            valueStyle={{ color: '#cf1322' }}
                            prefix={<DesktopOutlined />}
                        />
                    </Card>
                </Col>
            </Row>

            <div className="device-table">
                <Card
                    title="设备状态"
                    extra={<Button type="primary">刷新</Button>}
                    variant="borderless"
                >
                    <Table
                        columns={columns}
                        dataSource={deviceData}
                        loading={loading}
                        pagination={{ pageSize: 5 }}
                    />
                </Card>
            </div>
        </div>
    );
};

export default Home; 